// 在react中组件的文件后缀名是js或者jsx，相当于vue里的.vue文件
// 在react中有两种组件，一种叫做函数组件，一种叫做类组件
// 在函数组件中函数return的东西就是页面渲染的东西
// 每一个组件只能有一个根标签
// 在react中使用的是jsx语法
// jsx语法是html和js的混写，解析规则是遇到<>解析html，遇到{}解析js
import Appson from './Appson'
import React,{useState} from 'react'

const flag = true
const arr = [
    {
        name:"zhansgan",
        age:"20"
    },
    {
        name:"lisi",
        age:"21"
    },
    {
        name:"wangwu",
        age:"22"
    }
]

function App() {
    const name = "zhangsan"
  let [addreess,setAddress] = useState("北京市昌平区") 
  // 只有useState定义的变量是响应式的，类比vuedata里定义的变量是响应式的，其他的不可以

  // 声明了一个叫做address的变量，变量的初始值是北京市昌平区，setAddress是修改这个变量的方法
  let fn = ()=>{
    setAddress("上海市宝山区")
  
  }
  return (
    <div>{flag ? "张三" :"李四"}
     <h1>{name}</h1>
     {
         arr.map((item,index)=>{
             return <div key={index}>{item.name}</div>
         })
     }
     <h1>{addreess}</h1>
     <button onClick={fn}>点击修改arress</button>
     <Appson></Appson>
    </div>
    
  )
}

export default App